<template>
    <div class="creat_Orde">
        <!-- 头 -->
        <Header title="生成订单"></Header>
        <!-- 配送人员信息地址 -->
        <van-contact-card type="edit" :tel="current.tel" :name="current.name" @click="onEdit" />
        <!-- 内容 -->
        <div class="content">
            <div v-for="(item, index) in store.state.dingdan">
                <van-card :num="item.num" :price="item.price" :title="item.title" :thumb="item.pic" />
            </div>
        </div>
        <!-- 底部 -->
        <div class="pay-wrap">
            <div>
                <span>商品合计</span>
                <span>￥{{ sum }}</span>
            </div>
            <van-button type="primary" class="bth" color="#ffc400" block @click="handelCreateOrder">生成订单</van-button>
        </div>

    </div>
</template>
<script>
import { defineComponent, onMounted } from 'vue';
import Header from '../../components/Store_header.vue';
import store from '../../store';
import { showDialog } from 'vant';
import { useStore } from 'vuex';
import { reactive, toRefs } from 'vue';
import {useRouter,useRoute} from 'vue-router';
export default defineComponent({
    name: 'App',
    components: {
        Header
    },
    setup() {
        const store = useStore();
        const router = useRouter(); //跳转的时候有r
        const route = useRoute();  //获取跳转传过来的数据是没有r的
        let data = reactive({
            current: {},
            sum: 0
        });
        // 地址初始化
        const initUser = ()=>{
            store.state.userAddress.forEach(item=>{
                if(item.isDefault){
                    data.current.name = item.name
                    data.current.tel  = item.tel
                }
            })
        }
        // 价格初始化
        const initPrice = () => {
            let price = 0;
            if (store.state.dingdan.length) {
                store.state.dingdan.forEach((item) => {
                    price += item.num * item.price
                })
                data.sum = price
            }
        }
        // 生成订单
        const handelCreateOrder = () => {
            // 提示框
            showDialog({
                title: '提示',
                message: '生成订单成功！',
            }).then(() => {
                // on close  ===>再关闭时执行
                // 把vuex存储购物的数据每一项进行过滤
                // filter，第一个参数是function,return后面判断结果，取布尔值，返回值是true则该元素被保留，是false则丢弃该元素
                let newList = store.state.cartList.filter(item =>{  
                // route.query.list :carDetails组件跳转到此路由组件时传递的选中项的数据
                // includes查找数据，id+""是为了把数字转换成字符串进行查找
                return !route.query.list.includes(item.id+"") 
            })
            console.log(newList);
            // 更新购物车列表，将已完成的订单从购物车列表中移除
            store.commit('DELETE',newList)
            // 更新已完成订单列表
            store.commit('UPDATEORDER')
            // 跳转到订单页面
            router.push("/order")
            });

        }
        onMounted(() => {
            initPrice();
            initUser();
        })
        const onEdit = ()=>{
            router.push('/adress')
        }
        return {
            store,
            ...toRefs(data),
            handelCreateOrder,
            initUser,
            onEdit
        }
    }

})
</script>

<style lang="less" scoped>
.creat_Orde {
    display: flex;
    flex-flow: column;
    height: 100%;

    .content {
        flex: 1;
        overflow-y: auto;

    }

    .pay-wrap {
        padding: 10px 0;
        width: 100%;
        background-color: #fff;
        border-top: 1px solid #e9e9e9;

        >div {
            display: flex;
            justify-content: space-between;
            padding: 0 5%;
            margin: 10px 0;
            font-size: 14px;

            span:nth-child(2) {
                color: red;
                font-size: 18px;
            }

        }

        .bth {
            width: 90%;
            margin: 0 auto;
        }
    }

}</style>